<template>
  {{sValue.value}}
  <div>
  <van-nav-bar
      title="搜索页面"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <form action="/">
    <van-search
        v-model="sValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>
  <van-tabs v-model="activeTab" @change="onTabChange">
    <van-tab title="全部" name="a">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="a in allList" >
          <van-cell  :title="a.title"  :value="a.category " :label="a.createdAt"  :to="'/articleDetails/' +a.articleId" />
        </van-swipe-cell>
      </van-list>
    </van-tab>
    <van-tab title="资讯" name="b">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="b in mesLists" >
          <van-cell  :title="b.title"  :value="b.category " :label="b.content" :to="'/newsDetails/' +b.id"/>
        </van-swipe-cell>
      </van-list>
    </van-tab>
    <van-tab title="学习" name="c">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="c in studyLists" >
          <van-cell :title="c.title" :value="c.category" :label="c.createdAt" :to="'/articleDetails/' +c.articleId" />
        </van-swipe-cell>
      </van-list>
    </van-tab>
    <van-tab title="经验" name="d">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="d in expLists" >
          <van-cell  :title="d.expTitle" :label="d.expTime" :value="d.expType" />
        </van-swipe-cell>
      </van-list>
    </van-tab>
    <van-tab title="课程" name="e">
      <van-list
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="e in courseLists">
          <van-cell  :title="e.title" :value="e.courseType===1?'线上课程':'线下课程'" :label="e.startDate"/>
        </van-swipe-cell>
      </van-list>
    </van-tab>
  </van-tabs>
</div>
</template>

<script setup>
import {ref} from "vue";
import {get} from "../../util/request.js"
import {showToast} from "vant";
import {useRouter} from "vue-router";
const router = useRouter();
const sValue=ref('')

const loading = ref(false);
const finished = ref(false);



const activeTab = ref('c');
const onClickLeft = () => history.back();
const allLists =ref([])//全部数据
const allList = ref([])//模糊查询的数据
const mesLists =ref([])//资料数据
const studyLists =ref([])//学习数据
const expLists =ref([])//经验数据
const courseLists =ref([])//课程数据


const onTabChange = (tab) => {
  try{
    switch (tab) {
      case 'a':
        get('home/search/all').then( r=>{
          loading.value = false;
          if (r.code == 0){ // 获取成功
            // alert("查询成功")
            allLists.value= r.data;
            finished.value = true;
          }else {
            showToast("查询失败")
            // 加载状态结束
          }
        }).catch(function (){
          alert("全部异常")
        });
      case 'b':
        get('home/getNews' ).then( r=>{
          loading.value = false;
          if (r.code == 0){ // 获取成功
            // alert("查询成功")
            mesLists.value= r.data;
            finished.value = true;
          }else {
            showToast("查询失败")
            // 加载状态结束
          }
        }).catch(function (){
          alert("资讯查询异常")
        });
      case 'c':
        get('home/getArticle' ).then( r=>{
          loading.value = false;
          if (r.code == 0){ // 获取成功
            // alert("查询成功")
            studyLists.value= r.data;
            finished.value = true;
          }else {
            showToast("查询失败")
            // 加载状态结束
          }
        }).catch(function (){
          alert("学习查询异常")
        });
      case 'd':
        get('home/getExp' ).then( r=>{
          loading.value = false;
          if (r.code == 0){ // 获取成功
            // alert("查询成功")
            expLists.value= r.data;
            finished.value = true;
          }else {
            showToast("查询失败")
            // 加载状态结束
          }
        }).catch(function (){
          alert("经验查询异常")
        });
      case 'e':
        get('home/getCourse' ).then( r=>{
          loading.value = false;
          if (r.code == 0){ // 获取成功
            // alert("查询成功")
            courseLists.value= r.data;
            finished.value = true;
          }else {
            showToast("查询失败")
            // 加载状态结束
          }
        }).catch(function (){
          alert("课程查询异常")
        });
      default :

      }
  }catch (error){
    showToast("服务器异常")
  }
};

const onSearch = () =>{

    get(`home/search/${sValue.value}`).then(r => {
      loading.value = false;
      if (r.code == 0) { // 获取成功
        // alert("查询成功")
        allList.value = r.data;
        finished.value = true;
      } else {
        showToast("获取数据成功")
        // 加载状态结束
      }
    }).catch(function () {
      alert("查询全部异常")
    });

};

// const onHistory = () =>{
//   get('home/history' ).then( r=>{
//     loading.value = false;
//     if (r.code == 0){ // 获取成功
//       // alert("查询成功")
//       historys.value= r.data;
//       finished.value = true;
//     }else {
//       showToast("查询失败")
//       // 加载状态结束
//     }
//   }).catch(function (){
//     alert("服务器异常")
//   });
// };

const onLoad = () => {
  // 发起axios 请求 刷新
  // onCourse();
  console.log(sValue)
};
const onCancel = () => showToast('取消');
</script>

<style scoped>

</style>